<template>
    <div>
        <div v-if="!vid">
            <el-upload :show-file-list="false" :http-request="myUploadFile"
                :headers="{ Authorization: this.$store.getters.token }" :action="action" name="file"
                class="avatar-uploader">
                <i class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
        </div>
        <div v-else>
            <el-input style="width: 500px" v-model="vid" @change="changeINput"></el-input>
        </div>
        <!-- <el-input v-model="vid" @change="changeINput"></el-input> -->
    </div>
</template>
<script>
import TTUploader from 'tt-uploader';
import { getUploadVideoToken, getPlayAuth } from '@/api/article';
const uploader = new TTUploader({
    userId: 'zcl', // 建议设置能识别用户的唯一标识 ID，用于上传出错时排查问题，不要传入非 ASCII 编码
    appId: '778753', // 在视频点播控制台应用管理页面创建的应用的 AppID。视频点播的质量监控等都是以这个参数来区分业务方的，务必正确填写
    region: 'cn-north-1',
    // 仅视频/普通文件上传时需要配置
    videoConfig: {
        spaceName: 'shunxiao-test' //在视频点播控制台创建的空间的名称
    }
});
import { Loading } from "element-ui";
export default {
    name: "hotVideo",

    props: {
        value: String,
    },
    data() {
        return {
            vid: '',
            action: '',
            imageUrl: ''
        }
    },
    mounted() {
        this.init();
    },
    methods: {

        async getAssToken() {
            const res = await getUploadVideoToken()
            return {
                CurrentTime: res.data.currentTime,
                ExpiredTime: res.data.expiredTime,
                SessionToken: res.data.sessionToken,
                AccessKeyID: res.data.accessKeyId,
                SecretAccessKey: res.data.secretAccessKey
            }
        },
        // getPlayToken() {
        //     let params = {
        //         vid: this.vid
        //     }
        //     getPlayAuth(params).then(res => {
        //         const playAuthToken = res.data
        //         VePlayer.setLicenseConfig({
        //             license: "https://julimeng-prod.oss-cn-hangzhou.aliyuncs.com/managehub/static/l-1690044930-ch-vod-a-778753.lic"
        //         })
        //         const playerSdk = new VePlayer({
        //         id: "video-container",
        //         streamType: "mp4",
        //         getVideoByToken: {
        //             playAuthToken: playAuthToken
        //         },
        //         width: 140,
        //         height: 140,
        //         autoplay: true,
        //         loop: true,
        //         fluid: false,
        //         vodLogOpts: {
        //             vtype: "MP4",
        //             tag: "普通视频",
        //             line_app_id: 348293,
        //             line_user_id: "veplayer_web_demo"
        //         }
        //     });
        //     })
        // },

        async myUploadFile(e) {
            const file = e.file
            const blob = new Blob([file], { type: file.type });
            let assToken = await this.getAssToken()
            const fileKey = uploader.addFile({
                file: blob,
                stsToken: assToken,
                type: 'video',
            });
            uploader.start(fileKey);
            Loading.service({
                fullscreen: true,
                text: "上传中...",
                background: "rgba(0,0,0,.3)"
            });
            uploader.on('complete', (infor) => {
                Loading.service().close();
                this.vid = infor.uploadResult.Vid;
                this.$emit('input', infor.uploadResult.Vid);
                this.imageUrl = `https://volc-cover.shengdaiqifu.com/${infor.uploadResult.PosterUri}~tplv-vod-noop.image`
                this.$emit('successUpload', this.imageUrl)

            });

            uploader.on('error', (infor) => {
                console.log(infor.extra);
                Loading.service().close();
            });

            uploader.on('progress', (infor) => {
                // console.log(infor.percent)
            });

        },
        changeINput() {
            this.$emit('input', this.vid);

        },
        init() {
            if (this.value) {
                this.vid = this.value;
                // this.getPlayToken(this.vid)
            }

        }
    },
}
</script>
<style scoped lang="scss">
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px solid #d9d9d9 !important;
    border-radius: 6px !important;
    background: #fbfdff !important;
}

.el-upload {
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px !important;
    background: #fbfdff !important;
}
</style>